<template>
    <div class="group bgfff full">
        <nav>
            <ul class="flex-col c81 border-b padding-tb10">
                <li class="box1 box-center border-r" :class="{active: !isNav}" @click="isNav = false">
                    一级团队
                </li>
                <li class="box1 box-center" :class="{active: isNav}" @click="isNav = true">
                    二级团队
                </li>
            </ul>
        </nav>
        <ul class="group_list padding-lr15" v-show="!isNav">
            <li class="flex-col border-b" v-for="it in list1" :key="it.userId">
                <img :src="it.wximpurl" alt="">
                <div class="box1 padding-lr15">{{it.username}}</div>
                <div class="c81 font-12">{{it.mobile}}</div>
            </li>
            <li class="box-center c82" v-if="!list1.length">暂无一级团队</li>
        </ul>
        <ul class="group_list padding-lr15" v-show="isNav">
            <li class="flex-col border-b" v-for="it in list2" :key="it.userId">
                <img :src="it.wximpurl" alt="">
                <div class="box1 padding-lr15">{{it.username}}</div>
                <div class="c81 font-12">{{it.mobile}}</div>
            </li>
            <li class="box-center c82" v-show="!list2.length">暂无二级团队</li>
        </ul>

    </div>
</template>

<script>
export default {
  name: "group",
  data() {
    return {
      isNav: false,
      list1: [],
      list2: []
    };
  },
  created() {
    this.getGroupList();
  },
  methods: {
    // 获取团队信息
    getGroupList() {
      let that = this;
      this.http.post("user/teamList").then(res => {
        // console.log("++++++++++++++++" + JSON.stringify(res));
        this.list1 = res.data[0];
        this.list2 = res.data[1];
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.group {
  nav li {
    height: 0.25rem;
    &.active {
      color: #000;
    }
  }
  .group_list {
    li {
      height: 0.6rem;
      display: flex;
      //   justify-content: center;
      align-items: center;
      img {
        width: 0.3rem;
        height: 0.3rem;
        border-radius: 100%;
      }
    }
  }
}
</style>

